<!doctype html>
<html lang="en">
  <head>
    <script>
      (function (i, s, o, g, r, a, m) {
        i["GoogleAnalyticsObject"] = r;
        ((i[r] =
          i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          }),
          (i[r].l = 1 * new Date()));
        ((a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]));
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
      })(
        window,
        document,
        "script",
        "//www.google-analytics.com/analytics.js",
        "ga",
      );
      ga("create", "UA-61231638-1", "auto");
      ga("send", "pageview");
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Layout documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <!-- NAVBAR
================================================== -->
    <body>
      <div class="navbar-wrapper">
        <div class="container">
          <nav class="navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
              <div class="navbar-header">
                <button
                  type="button"
                  class="navbar-toggle collapsed"
                  data-toggle="collapse"
                  data-target="#navbar"
                  aria-expanded="false"
                  aria-controls="navbar"
                >
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
                <form class="navbar-form navbar-right" role="search">
                  <input
                    name="q"
                    id="tipue_search_input"
                    autocomplete="off"
                    type="text"
                    class="form-control"
                    placeholder="Enter keywords"
                  />
                  <button
                    type="button"
                    class="btn btn-default"
                    onclick="vis.initSiteSearch(true);"
                  >
                    Go!
                  </button>
                </form>
                <div id="search-results-wrapper" class="panel panel-default">
                  <div class="panel-body">
                    <div id="tipue_search_content"></div>
                  </div>
                </div>
                <div id="keyword-info" class="panel panel-success">
                  <div class="panel-body">
                    Found <span id="keyword-count"></span> results. Click
                    <a id="keyword-jumper-button" href="">here</a> to jump to
                    the first keyword occurence!
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="container full">
        <h1>Network - layout</h1>
        <p>
          Acts as the camera that looks on the canvas. Does the animation,
          zooming and focusing.
        </p>
        <h3>Options</h3>
        <p>
          The options for the layout module have to be contained in an object
          titled 'layout'.
        </p>
        <p>
          Click on the full options or shorthand options to show how these
          options are supposed to be used.
        </p>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active" onclick="toggleTab(this)">
            <a href="#">options hidden</a>
          </li>
          <li
            role="presentation"
            onclick="toggleTab(this);"
            targetNode="fullOptions"
          >
            <a href="#">full options</a>
          </li>
          <li
            role="presentation"
            onclick="toggleTab(this);"
            targetNode="shortOptions"
          >
            <a href="#">shorthand options</a>
          </li>
        </ul>
        <br />
        <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
  layout: {
    randomSeed: undefined,
    improvedLayout:true,
    clusterThreshold: 150,
    hierarchical: {
      enabled:false,
      levelSeparation: 150,
      nodeSpacing: 100,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'hubsize',  // hubsize, directed
      shakeTowards: 'leaves'  // roots, leaves
    }
  }
}

network.setOptions(options);
</pre
        >

        <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
  layout:{
    hierarchical: true
  }
}

network.setOptions(options);
</pre
        >
        <p>
          When enabling the hierarchical layout, it overrules some of the other
          options. The physics is set to the hierarchical repulsion solver and
          dynamic smooth edges are converted to static smooth edges.
        </p>
        <table class="options" id="optionTable">
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <td>Description</td>
          </tr>
          <tr>
            <td>randomSeed</td>
            <td>Number or String</td>
            <td><code>undefined</code></td>
            <td>
              When NOT using the hierarchical layout, the nodes are randomly
              positioned initially. This means that the settled result is
              different every time. If you provide a random seed manually, the
              layout will be the same every time. Ideally you try with an
              undefined seed, reload until you are happy with the layout and use
              the <code>getSeed()</code> method to ascertain the seed.
            </td>
          </tr>
          <tr id="layout">
            <td>improvedLayout</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              When enabled, the network will use the Kamada Kawai algorithm for
              initial layout. For networks larger than 100 nodes, clustering
              will be performed automatically to reduce the amount of nodes.
              This can greatly improve the stabilization times. If the network
              is very interconnected (no or few leaf nodes), this may not work
              and it will revert back to the old method. Performance will be
              improved in the future.
            </td>
          </tr>
          <tr>
            <td>clusterThreshold</td>
            <td>Number</td>
            <td><code>150</code></td>
            <td>
              Cluster threshold to which <code>improvedLayout</code> applies.
            </td>
          </tr>
          <tr
            class="toggle collapsible"
            onclick="toggleTable('optionTable','hierarchical', this);"
          >
            <td>
              <span parent="repulsion" class="right-caret"></span> hierarchical
            </td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>
              When true, the layout engine positions the nodes in a hierarchical
              fashion using default settings. For customization you can supply
              an object.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>
              Toggle the usage of the hierarchical layout system. If this option
              is not defined, it is set to true if any of the properties in this
              object are defined.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.levelSeparation</td>
            <td>Number</td>
            <td><code>150</code></td>
            <td>The distance between the different levels.</td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.nodeSpacing</td>
            <td>Number</td>
            <td><code>100</code></td>
            <td>
              Minimum distance between nodes on the free axis. This is only for
              the initial layout. If you enable physics, the node distance there
              will be the effective node distance.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.treeSpacing</td>
            <td>Number</td>
            <td><code>200</code></td>
            <td>
              Distance between different trees (independent networks). This is
              only for the initial layout. If you enable physics, the repulsion
              model will denote the distance between the trees.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.blockShifting</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              Method for reducing whitespace. Can be used alone or together with
              edge minimization. Each node will check for whitespace and will
              shift it's branch along with it for as far as it can, respecting
              the nodeSpacing on any level. This is mainly for the initial
              layout. If you enable physics, the layout will be determined by
              the physics. This will greatly speed up the stabilization time
              though!
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.edgeMinimization</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              Method for reducing whitespace. Can be used alone or together with
              block shifting. Enabling block shifting will usually speed up the
              layout process. Each node will try to move along its free axis to
              reduce the total length of it's edges. This is mainly for the
              initial layout. If you enable physics, the layout will be
              determined by the physics. This will greatly speed up the
              stabilization time though!
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.parentCentralization</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>
              When true, the parents nodes will be centered again after the
              layout algorithm has been finished.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.direction</td>
            <td>String</td>
            <td><code>'UD'</code></td>
            <td>
              The direction of the hierarchical layout. The available options
              are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up,
              left-right, right-left.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.sortMethod</td>
            <td>String</td>
            <td><code>'hubsize'</code></td>
            <td>
              The algorithm used to ascertain the levels of the nodes based on
              the data. The possible options are:
              <code>hubsize, directed</code>. <br /><br />
              Hubsize takes the nodes with the most edges and puts them at the
              top. From that the rest of the hierarchy is evaluated.
              <br /><br />
              Directed adheres to the to and from data of the edges. A --> B so
              B is a level lower than A.
            </td>
          </tr>
          <tr parent="hierarchical" class="hidden">
            <td class="indent">hierarchical.shakeTowards</td>
            <td>String</td>
            <td><code>'leaves'</code></td>
            <td>
              Controls whether in <code>directed</code> layout should all the
              roots be lined up at the top and their child nodes as close to
              their roots as possible (<code>roots</code>) or all the leaves
              lined up at the bottom and their parents as close to their
              children as possible (<code>leaves</code>, default).
            </td>
          </tr>
        </table>

        <div class="flagbar">
          <a href="../../docs/network/layout.html" title="English"
            ><span class="flag en"></span
          ></a>
          <a href="../../docs-kr/network/layout.html" title="Korean"
            ><span class="flag kr"></span
          ></a>

          <br />

          Third party docs:
          <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
            ><span class="flag zh"></span
          ></a>
        </div>
      </div>

      <!-- Bootstrap core JavaScript
================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
      <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
      <!-- jquery extensions -->
      <script src="../../common-docs-files/js/jquery.highlight.js"></script>
      <script src="../../common-docs-files/js/jquery.url.min.js"></script>
      <!-- Tipue vendor js -->
      <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
      <!-- controller -->
      <script src="../../common-docs-files/js/main.js"></script>
    </body>
  </body>
</html>
